<template>
  <div>
    <top-bar v-if="movieInfo" class="top-bar">
      <template #left>
        <div class="back" @click="backClick">
          <i class="iconfont icon-fanhui"></i>
        </div>
      </template>
      <template #center>
        <span>{{ movieInfo.name }}</span>
      </template>
    </top-bar>
    <div class="movie-info" v-if="movieInfo">
      <div class="poster">
        <img :src="movieInfo.poster" alt="" />
      </div>
      <div class="info">
        <h2>{{ movieInfo.name }}</h2>
        <p>评分：{{ movieInfo.grade }}</p>
        <p>{{ movieInfo.category }}</p>
        <p>
          {{
            (movieInfo.premiereAt * 1000) | timeFormat("YYYY-MM-DD HH:mm:ss")
          }}上映
        </p>
        <p>{{ movieInfo.nation }} | {{ movieInfo.runtime }}分钟</p>
        <p class="synopsis">{{ movieInfo.synopsis }}</p>
      </div>

      <detail-swiper
        :actors="movieInfo.actors"
        :photos="movieInfo.photos"
      ></detail-swiper>

      <div class="schedule">选座购票</div>
    </div>
  </div>
</template>

<script>
import moment from "moment"; //导入文件
import DetailSwiper from "./detail/DetailSwiper";
import TopBar from "@/components/TopBar";
import { getDetailAPI } from "@/network/api";

export default {
  name: "Detail",
  components: {
    DetailSwiper,
    TopBar,
  },
  data() {
    return {
      id: "",
      movieInfo: null,
    };
  },
  filters: {
    timeFormat(val, format = "YYYY-MM-DD HH:mm:ss") {
      return moment(val).format(format);
    },
  },
  methods: {
    backClick() {
      this.$router.back();
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    getDetailAPI({
      filmId: this.id,
      k: 7005432,
    }).then((res) => {
      this.movieInfo = res.data.data.film;
      console.log(this.movieInfo);
    });
  },
};
</script>

<style scoped  lang="less" >
.top-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.movie-info {
  margin-bottom: 60px;
  margin-top: 44px;
}
.poster {
  height: 240px;
  overflow: hidden;
  position: relative;
  img {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 100%;
  }
}
.info {
  background-color: #fff;
  padding: 10px;
  .synopsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.schedule {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  line-height: 49px;
  color: #fff;
  background-color: #ff5f16;
  font-size: 20px;
  text-align: center;
}
</style>